<template>
<div class="action-dialog-box">
    <div class="action-dialog-content">
        <div class="action-row">
            <div class="action-dialog-text action-dialog-text1">{{i18n('selectDialog','选择对话框')}}</div>
            <div class="action-input-box">
                <rx-input-button v-model="selectDialog" @change="change" @click="openDialogBox"></rx-input-button>
            </div>
        </div>
        <div class="action-row ">
            <div class="action-dialog-text action-dialog-text2">{{i18n('selectField','选择对话框字段')}}</div>
            <div class="action-input-box">
                <a-select style="width: 100%" :disabled="options.length === 0" :options="options" v-model="field"></a-select>
            </div>
        </div>
        <div class="action-row">
            <div class="action-dialog-text action-dialog-text3">{{i18n('selectFieldData','选中字段数据')}}</div>
            <div class="action-input-box">
                <a-input-group compact style="display:flex;">
                    <a-input v-model="fieldVal" style="flex: 1;" :disabled="!field" allowClear></a-input>
                    <a-button @click="preview" style="padding: 0 8px;background-color: #f5f7fa;"  :disabled="!field">
                        <my-icon type="iconVue3_setting"></my-icon>
                    </a-button>
                </a-input-group>
            </div>
        </div>

    </div>
    <div class="action-btn-box">
        <a-button @click="close('ok')" type="primary" style="margin-right: 10px">{{i18n('confirm','确定')}}</a-button>
        <a-button @click="close">{{i18n('cancel','取消')}}</a-button>
    </div>
</div>
</template>

<script>
/**
 * @Author : yangsanjin
 * @Date: 2024-09-09 17:19
 */
import {Dialog,RxInputButton,Util} from "@lowcode/jpaas-common-lib";
import FormApi from "@/views/modules/form/core/js-comps/api/FormApi.js";
import {openUrl} from "@/utils/util";
export default {
    name: "ActionDialog",
    components:{
        RxInputButton
    },
    props:{
        dialogData:{},
        layerid: {},
        destroy:{}
    },
    data(){
        return {
            iframeParent:true,
            selectDialog:'',
            options:[],
            field:'',
            appId:'',
            title:'',
            key:'',
            fieldVal:'',
            inputState:false
        }
    },
    created(){
        if(this.dialogData && Object.keys(this.dialogData).length > 0){
            let {selectDialog,field,fieldVal,appId,title,key} = this.dialogData ;
            this.initData({selectDialog,field,fieldVal,appId,title,key})
            this.initOptions({key})
        }
    },
    methods:{
        i18n(name,text,key){
            return this.$ti18(name,text,"formCellRender",key);
        },
        initData(config){
            for (let key in config){
                this[key] = config[key];
            }
        },
        close(type){
            if(type){
                let {selectDialog,field,fieldVal,appId,title,key} = this ;
                if(!fieldVal){
                    Util.closeWindow(this,'')
                    return ;
                }
                Util.closeWindow(this,'ok',{selectDialog,field,fieldVal,appId,title,key})
            }else {
                Util.closeWindow(this,'')
            }
        },
        change(val){
            if(!val){
                //清除
                this.initData({
                    field:'',
                    appId:'',
                    title:'',
                    key:'',
                    fieldVal:'',
                    options:[]
                })
            }
        },
        openDialogBox(vm){
            Dialog.openFormBoListDialog({
                curVm: this,
                data: {single: true, isDialog: 'YES',isDataGrant:false},
                widthHeight: ['1000px', '500px']
            },(action,data)=>{
                if(data && Array.isArray(data) && data.length > 0){
                    let {name:text,key:val,appId} = data[0];
                    this.appId = appId ;
                    this.title = text ;
                    this.key = val ;
                    this.initOptions({key:val})
                    vm.setVal(val,text)
                }

            })
        },
        initOptions(config){
            FormApi.getBoList(config).then(res=>{
                if(!res.success){
                    return;
                }
                let obj = res.data;
                let fields = obj.fieldsJson ? JSON.parse(obj.fieldsJson) : [];
                let ary = fields.filter(item => item.isReturn);
                this.options = ary.map(function (item) {
                    return {
                        value: item.field,
                        label: item.header,
                    }
                });
            })
        },
        actionDestroy(action,iframeThis){
            /*
            * DialogView.vue传出 iframeThis 当前的iframe
            * iframeThis.contentWindow.GetIframeData 获取当前对话框选中的数据
            * 在FormBoListPreview.vue中定义
            * */
            if(iframeThis && iframeThis.contentWindow && iframeThis.contentWindow.GetIframeData){
                let data = iframeThis.contentWindow.GetIframeData() ;
                if(data){
                   this.fieldVal =  data.rows[0][this.field]
                }
            }
        },
        preview() {
            let { appId ,title,key} = this;
            let ctxPath= process.env.VUE_APP_CONTEXT_MAIN;
            let url=`${ctxPath}/list/${key}?appId=${appId}`;
            openUrl({url:url,title:title,curVm:this,widthHeight:['800px','600px'],dialogBox:true,destroy:this.actionDestroy});
        },
    }
}
</script>

<style scoped>

.action-dialog-box{
    width: 100%;
    display: grid;
    grid-template-rows: 1fr auto;
}
.action-dialog-content{
    padding: 10px;
}
.action-btn-box{
    padding: 6px 10px;
    border-top: 1px solid #ddd;
    text-align: right;
}
.action-row{
    position: relative;
    padding-bottom: 20px;
}
.action-input-box{
    padding-left: 30px;
}
.action-dialog-text{
    padding:0 30px;
    margin-bottom: 10px;
}
.action-dialog-text1::before{
    content: '1';
}
.action-dialog-text2::before{
    content: '2';
}
.action-dialog-text3::before{
    content: '3';
}
.action-dialog-text::before{
    display: inline-flex;
    width: 24px;
    height: 24px;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    background: rgba(66, 133, 244, 1);
    color: #fff;
    border: 2px solid #fff;
    position: absolute;
    z-index: 2;
    left: 0;
    top: 0;
}
.action-row:not(:last-child) .action-dialog-text::after{
    content: '';
    position: absolute;
    left: 12px;
    top: 20px;
    height: 100%;
    width: 1px;
    border-left: 1px dashed rgba(66, 133, 244, 1);
}
</style>